Theme Info

HYBRID

business & portfolio theme

Created: 07/12/2013

latest Update: 07/12/2013

By: StonedThemes

Email: stonedthemes@gmail.com

Hybdid is a business & portfolio wordpress theme.

Build on a clean design, and in a good thought funcionality Hybrid can be your best choice for a horizontal blog, portfolio, gallery, presenting your work or photographies. Hybrid is a simple to use and it's branding features gives you a great and powerful options to customize colors and fonts so you can simply make your own style. Also three different types of home page templates and 8 theme skins gives you opportunity to be more unique.

Features

Responsive Design
Retina Ready
Fully Customable Style
MasonryJS
IsotopeJS Sorting
4 Home Pages
2 Service Page
2 Portfolio Pages
1 Blog Page
1 Contact Page
1 About Page
1 Testimonial Page
3 Custom Posts (Galleries, Testimonials & Services)
Font awesome with up to 316 icons
Translation Ready
Shortcodes (up to 14)
500+ Google Fonts
Ajax
Social Share Buttons
Comments per Post
Social Network Links
8 theme skins
Background Image Styles
Google Map
Widget Ready
3 Widget Area (2 home sidebars & a right sidebar)
11 custom Widgets (about/simple html,advertising,3 blogpost widgets,flickr,instagram,twitter,facebook,testimonials,contact us)

Install Theme

Just upload hybrid.zip via theme uploaded on your wp-admin and you're ready to go. If you get any error after you installed the theme than this could happen :

1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead

2.Or delete the Theme folder and install .zip file which is in this package

Options

Main Options

Custom CSS
Custom JS
Headings and paragraphs fonts
Disable Blog Social Shares
Disable Work Social Shares
Social Shares

Branding Options

Background Image
Background Color
Theme Skins (Default, Black,Blue, Black & White, Green, Nemo, Orange, Yellow)
Advertising
Contact Us

Header Options

Site Favicon
Logo
Text Logo
Text Logo Color
Text Logo Font
Text Font Size

Footer Options

Copy Right Text
Social Networks

Main

Main Options

Custom CSS
Write your custom CSS without touching the existing code
Custom JS
Write your custom JS without touching the existing code
Headings and paragraphs fonts

Choose a google font for headings and another google font for paragraphs(if none than questrial is default)

Disable Blog Social Shares
Check it if you don't want to give right to visitors to share your blog posts
Disable Work Social Shares
Check it if you don't want to give right to visitors to share your work posts
Social Shares
Choose which share buttons to appear, these share buttons will apear in blog and work posts

Branding

Branding Options

Background Image
Add a background image to your website!
Background Color
Choose your background color.
Theme Skins (Default, Black, Blue, Black & White, Green, Nemo, Orange, Yellow)
Choose one of the skins for your web
Advertising
Add advertising which will apear on Adv custom widget (use a unique name with that name you link the adv widget)
Contact Us
Add contact info which will apear on Contact Us custom widget

Head

Header Options

Site Favicon
Choose a favicon for your website!
Logo
Add your logo here
Text Logo
Add Text as logo. Note: this text only shows if you do not insert a logo image!
Text Logo Color
Choose a color to the text logo
Text Logo Font
Choose the text logo font (Google fonts)
Text Font Size
Choose the size of the text logo

Footer

Footer Options

Copy Right Text
Add The copy right text (wysiwyg)
Social Networks
Add Social Networks

Home 1

Latest Works

Latest Work Title
Items on slider (select how many items to display on slider)

Header

Disable Header

if checked disable this header

Header Title
Add a header title which will be displayed below the menu
Header Desc
Add a header description which will be displayed on header
Header Link
Add a header link
Header Backgroud Color
Choose header background color
Text Color
Choose text color
Font
Add a font for header
Icon
Choose a font awsome icon

Home 2

Page Options

Page Title
Add a title for home 2 page Note: if this field is empty the Menu Title will be displayed!
Article Title
Add a title for articles
Disable Homebar
Check it if you don't want to show a sidebar on this page

Accordions

Accordions Title
Add a title for accordions
Accordions
Add a title and a description for accordions

As in home 1 template you can add a big header on home 2 too.

Header

Disable Header

if checked disable this header

Header Title
Add a header title which will be displayed below the menu
Header Desc
Add a header description which will be displayed on header
Header Link
Add a header link
Header Backgroud Color
Choose header background color
Text Color
Choose text color
Font
Add a font for header
Icon
Choose a font awsome icon

Prefered image size for works on slider is 285 x 341 (these are featured workposts images)

Home 3

To setup the Home 3 Page just create a Page and select the template as Home 3

Slider options

Image
Add an image to display on slide
Big title
Add a big title to display on image
Small title
Add a small title to display on image
Description
Add a description to display on image
Disable text
If you don't want to display text on image just check this field
Link
You can link this image with any page
Animation
Choose one animation for the text (there are more than 20 of them)

About Template

About Options

In tab one About Title as you see in the picture you add the page title
Note: if this field is empty the Menu Title will be displayed!

In tab two Gallery
Add gallery title (Add text which will be displayed above the gallery)
and on gallery items add images to display on gallery.

Prefered gallery image size is 570 x 320

In tab three Team you can add team title
In the Team section you will need to add team member images, full name, position and Social networks.
Add as many team members as you want.

Prefered team member image size is 270 x 150

Contact Template

Contact Options

The contact options have two tabs : Contact Info and Map info

Contact Info

Contact Title
Add the page title. Note: if this field is empty the Menu Title will be displayed
Address Title
Add text to display as address title
Address Description
Add address info (you can add more than one address).
E-mail Title
Add e-mail title
E-mails
Add emails info (you can add more than one email).
Telephones Title
Add the telephones title
Telephones numbers
Add phone numbers (you can add more than one phone number).
Schedule Title
Add the schedule title
Schedule Description
Add schedule description

Map Info

Disable Map
If you don't want to use a map and show your location, simply disable it!
Map Title
Add the title for the Map
Map Grayscale
Display map on grayscale if checked
Map Zoom
Add the level how deep the map should go. Note: anything under 0 will be 0.
Google Map
Search for your location and pick the exact area you want!

Blog posts & blog Template

Blog Posts Options

You will need to add the featured image. This featured image will present that blog post and also will be shown inside the blog page (single.php)

Tab 1 - Post Type

With blog posts we gave you the options to choose between three different post type

None - which means a default wordpress post
Video - a video post with three different options: youtube,vimeo and self hosted
- Youtube and Vimeo just need to add the video id.
- Selfhosted video you add the video file.
Slider - a slider image, add as many images as you want

Tab 2 -Post Options

If you have a live demo for the post add the url as in the below picture

Blog template

Blog Options

Page Title
Add the page title. Note: if this field is empty the Menu Title will be displayed!
Posts on page
Display Posts on page load and on load more click. Note: negative numbers will display 3 blog posts.

Work posts & Work Templates

To setup a work post, you have to click on the work pots in the option panel and then add a new work.

You need to add a featured image to present your work.

Work Posts Options

Tab 1 - Post Type

Choose one of three work post options:

None - which means a default post with a featured image
Video - a video post with three different options: youtube,vimeo and self hosted
- Youtube and Vimeo just need to add the video id.
- Selfhosted video you add the video file.
Slider - a slider of images, add as many images as you want

Tab 2 -Post Options

If you have a live demo for the post add the url as in the below picture

Work1 & Work2 template

Work Options

Page Title
Add the page title. Note: if this field is empty the Menu Title will be displayed!
Posts on page
Display Posts on page load and on load more click. Note: negative numbers will display 3 blog posts.

Work template 1 has 4 column design

Work template 2 has 2 column design

Testimonials posts & Templates

Testimonials Posts Options

Write the name of the testmonials author on the post title.
Link - Add a link for testmonial.
Position - Position of the testimonial author.

Testimonial Templates

There are two ways to show these post on your website:

First by creating a page and assinging the testimonial template to that page,
where you can specify how many posts per page you want

and second by adding a widget to your homebars or sidebars

Service posts & Templates

To create a Service is easy, is just the same like creating a post. Just go to the admin panel and click Services.

Service Posts Options

Font awesome
Choose the service icon. We support Font awesome so you can choose between 316 icon for you service.
Font awesome color
Choose a color for the font awesome you choosed like in image

Otherwise set a custom image for the service

Service Templates

To show your services posts creat a page and assinging the service template to that page

On page options set the column type you can choose between 2 and 4 columns layout

Short codes

On every page you can use shortcodes! On WYSIWYG (What You See Is What You Get) area you can an simply pres shortcode buttons on the toolbox and write the content of it.

Heading tags are simply to use, just click on the Heading tag you want and write your text inside [Hn]tags[/Hn]! (n-represents hedings number, like H1 is bigger and H6 is smaller one).

Alerts Choose one from toolbox (Alert info,Alert error,Alert success and Alert Warning) and on the title atribute add add alert Title and between opened and closed brackets write the message.

Videos can be added in the same way for youtube and vimeo.

Here is the sample:

the ID is the last part on the link, like this:

[youtube width="300" height="300" id="8ptfyhBjXj8" ][/youtube]

vimeo example:

Accordions have a construction like this.

[accordion]
[accordion_item title="Title1"]For at least 40,000.[/accordion_item]
[accordion_item title="Title2"]A highly developed[/accordion_item]
[/accordion]

Just replace the “Title1” with your title and the text with your content.
To add more accordions just copy one of the existing and change the title and conent. Careful with the starting & ending tags [accordion][/accordion]

Tabs has a similar structure with tags too:

[tabgroup]
[tab title="Tab1"]The earliest.[/tab]
[tab title="Tab2"]A highly.[/tab]
[/tabgroup]

Just replace the “Tab1” with your title and “the earliest” with your content and you're done. To add more tabs, just copy one of the lines ex. [tab title="Tab1"]The earliest.[/tab] and edit the data in it.

Font Awesome is a shortcode to add icons with up to 316 icons.

It's easy to add an icon anywhere you want, just like this:

[fontAwesome name="icon-name" size="icon-size"] [/fontAwesome]

You can use 3 different sizes, like: icon-large, icon-2x, icon-3x, icon-4x, or leave it blank for normal size.

here they are a list of icons you can use:

icon-glass
icon-music
icon-search
icon-envelope-alt
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file-alt
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key
icon-cogs
icon-comments
icon-thumbs-up-alt
icon-thumbs-down-alt
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter
icon-facebook
icon-github
icon-unlock
icon-credit-card
icon-rss
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand-up
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud
icon-beaker
icon-cut
icon-copy
icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck
icon-pinterest
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope
icon-linkedin
icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee
icon-food
icon-file-text-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign-alt
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop
icon-tablet
icon-mobile-phone
icon-circle-blank
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-close-alt
icon-folder-open-alt
icon-expand-alt
icon-collapse-alt
icon-smile
icon-frown
icon-meh
icon-gamepad
icon-keyboard
icon-flag-alt
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-mail-reply-all
icon-star-half-empty
icon-location-arrow
icon-crop
icon-code-fork
icon-unlink
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle-piece
icon-microphone
icon-microphone-off
icon-shield
icon-calendar-empty
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-sign-left
icon-chevron-sign-right
icon-chevron-sign-up
icon-chevron-sign-down
icon-html5
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-horizontal
icon-ellipsis-vertical
icon-rss-sign
icon-play-sign
icon-ticket
icon-minus-sign-alt
icon-check-minus
icon-level-up
icon-level-down
icon-check-sign
icon-edit-sign
icon-external-link-sign
icon-share-sign
icon-compass
icon-collapse
icon-collapse-top
icon-expand
icon-eur
icon-gbp
icon-usd
icon-inr
icon-jpy
icon-cny
icon-krw
icon-btc
icon-file
icon-file-text
icon-sort-by-alphabet
icon-sort-by-alphabet-alt
icon-sort-by-attributes
icon-sort-by-attributes-alt
icon-sort-by-order
icon-sort-by-order-alt
icon-thumbs-up
icon-thumbs-down
icon-youtube-sign
icon-youtube
icon-xing
icon-xing-sign
icon-youtube-play
icon-dropbox
icon-stackexchange
icon-instagram
icon-flickr
icon-adn
icon-bitbucket
icon-bitbucket-sign
icon-tumblr
icon-tumblr-sign
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows
icon-android
icon-linux
icon-dribble
icon-skype
icon-foursquare
icon-trello
icon-female
icon-male
icon-gittip
icon-sun
icon-moon
icon-archive
icon-bug
icon-vk
icon-weibo
icon-renren

Widgets (Sidebars)

Sidebars

You have three options for widgets:

To display them on a main sidebar, on home1 template footer sidebar and hom2 template footer sidebar.

Main Sidebar will be displayed in the right side.

Main sidebar will be displayed on: blog page, single page, default pages, search and archive.

Home1 Footer Sidebar will be displayed on home1 page template.

To set them up just go to Appearance > Widget and drag and drop the widgets by your wish.

Home2 Footer Sidebar will be displayed on home2 page template.

Same as for Home1 sidebar to set them up just go to Appearance > Widget and drag and drop the widgets by your wish.

Widgets

We offer 11 custom Widgets

About
Advertising
Blogpost image slider
Blogpost no image slider
Blogpost sidebar
Flickr
Instagram
Twitter
Facebook
Testimonials
Contact us

About

Is a custom widget you need to add a Widget title, Title, Category and text description

Advertising

As descriped earlier you add advertises on Branding options page, here you just conectid with unique name and add the widget title.

Blogpost image slider (designed only for Home1 and Home2 footer sidebars)

Is a widget wich shows blogposts in a slider with featured images and descriptions. Drag and drop and simply add widget title.

Blogpost no image

Is a widget wich shows blogposts in a slider with post descriptions. Drag and drop and simply add widget title.

Blogpost sidebar

Is a widget wich shows blogposts title categories and a link to redirect to post. Drag and drop and simply add widget title.

Flickr

Just drag and drop the Flickr widget, add a widget title flickr user id and API KEY.

Instagram

Just drag and drop the Instagram widget, add a widget title insagram user id and Access Token.

Twitter

Just drag and drop the Twitter widget and add the follow link without an @ ... ex: for @9GAG just add 9GAG

Facebook

Just drag and drop the Facebook widget than add Title, App Id, Page name (http://www.facebook.com/[page_name]) and Width
you also have three checkboxes : Show Faces , Show Stream, and Show Header.

Testimonials

This widget displays testimonials custom posts, add widget title.

Contact us

As described earlier you add contact info on Branding options page, than drag and drop the Contact Us widget and fill the widget title